<template>
  <q-card-actions align="right">
    <q-btn
      color="primary"
      flat
      v-bind="data.ok"
      @click="$emit('ok')"
      v-if="data.ok"
    />
    <q-btn
      color="grey"
      flat
      v-bind="data.cancel"
      @click="$emit('cancel')"
      v-if="data.cancel"
    />
  </q-card-actions>
</template>

<script>
import { computed, defineComponent, reactive } from "vue";

export default defineComponent({
  name: "ComponentsDialogsFooterButtonsVue",
  props: {
    ok: { type: [Object, String, Boolean], default: "确定" },
    cancel: { type: [Object, String, Boolean], default: "取消" },
  },
  setup(props) {
    const data = reactive({
      ok: computed(() => {
        if (typeof props.ok === "string") {
          return { label: props.ok };
        }
        return props.ok;
      }),
      cancel: computed(() => {
        if (typeof props.cancel === "string") {
          return { label: props.cancel };
        }
        return props.cancel;
      }),
    });
    return {
      data,
    };
  },
});
</script>
